<template>
  <form @submit.prevent="signin">
    <div class="form-floating">
      <input v-model="data.name" class="form-control" placeholder="John Doe" />
      <label for="floatingInput">Name</label>
    </div>

    <div class="form-floating">
      <input
        v-model="data.email"
        type="email"
        class="form-control"
        placeholder="name@example.com"
      />
      <label for="floatingInput">Email</label>
    </div>
    <div class="form-floating">
      <input
        v-model="data.password"
        type="password"
        class="form-control"
        placeholder="Password"
      />
      <label for="floatingPassword">Password</label>
    </div>

    <button class="btn btn-primary w-100 py-2" type="submit">Sign in</button>
  </form>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useRouter } from "vue-router";

const data = reactive({
  name: "",
  email: "",
  password: "",
});

const router = useRouter();

const signin = async () => {
  await fetch("http://localhost:5109/api/Auth/register", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(data),
  });

  await router.push("/login");
};
</script>
